<template>
  <div id="music">
    <div id="bgMusic" :style="'background:url('+ bgImg +') no-repeat center top'"></div>
    <!-- 背景蒙板 -->
    <div class="bgMack">
      <transition>
        <img src="../../../static/网易云-素材/needle-ip6.png" alt :class="palyAnimation" />
      </transition>
      <div class="bgMusicImg" :class="bgMusicImg" @click="play">
        <img :src="bgImg" alt />
        <!-- <div class="musicPlay"></div> -->
        <i class="el-icon-video-play musicPlay" v-if="paly"></i>
        <audio :src="music" ref="myaudio"></audio>
      </div>
    </div>
  </div>
</template>
<script>
import Axios from "axios";
import { log } from "util";
export default {
  data() {
    return {
      bgImg: "",
      paly: true,
      palyAnimation: "",
      music: "",
      bgMusicImg: ""
    };
  },
  methods: {
    play() {
      this.paly = !this.paly;
      let audio = this.$refs.myaudio;
      if (this.paly) {
        this.palyAnimation = "stop";
        this.bgMusicImg = "rotateStop";
        audio.pause();
      } else {
        audio.play();
        this.palyAnimation = "palyAnimation";
        this.bgMusicImg = "rotate";
      }
    }
  },
  mounted() {
    let id = this.$route.params.id;
    this.$http.get("/api/song/detail?ids=" + id).then(res => {
      this.bgImg = res.data.songs[0].al.picUrl;
    });
    this.$http.get("/api/song/url?id=" + id).then(res => {
      console.log(res);
      this.music = res.data.data[0].url;
      console.log(this.music);
    });
  }
};
</script>
<style scoped>
#music {
  height: 100%;
  width: 100%;
}
#bgMusic {
  height: 100%;
  width: 100%;
  filter: blur(20px);
  position: fixed;
  left: 0;
  top: 0;
}
.bgMack {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  left: 0;
  top: 0;
}
.bgMack .bgMusicImg img {
  width: 2.8rem;
  height: 2.8rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
/* 动画杆 */
.bgMack > img {
  width: 2rem;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-30%) rotateZ(-20deg);
  z-index: 22;
  transform-origin: left top;
}
.palyAnimation {
  animation: key 1s linear 1 alternate forwards;
}
@keyframes key {
  0% {
    transform: translateX(-30%) rotateZ(-20deg);
  }
  100% {
    transform: translateX(-30%) rotateZ(0deg);
  }
}
.stop {
  animation: stop 1s linear;
}
@keyframes stop {
  0% {
    transform: translateX(-30%) rotateZ(0deg);
  }
  100% {
    transform: translateX(-30%) rotateZ(-20deg);
  }
}
/* 播放音乐按钮样式及动画 */
.bgMusicImg {
  width: 4.7rem;
  height: 4.7rem;
  background: url(../../../static/网易云-素材/disc-ip6.png);
  background-size: 100%;
  position: absolute;
  left: 50%;
  top: 1.7rem;
  transform: translate(-50%);
  transform-origin: center center;
}
.rotate {
  animation: rotate 7s linear infinite;
  /* animation-play-state:paused; */
}
.rotateStop {
  animation: rotate 7s linear infinite;
  animation-play-state: paused;
}
@keyframes rotate {
  0% {
    transform: translate(-50%) rotateZ(0);
  }
  100% {
    transform: translate(-50%) rotateZ(360deg);
  }
}
.musicPlay {
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  font-weight: 100;
}
</style>